<template>
  <div>
    <Card dis-hover>
      <Form ref="queryForm" :label-width="100" label-position="left" inline>
        <Row :gutter="16">
          <Col span="6">
            <FormItem label="问卷名称:" prop="paperName" style="width:100%;">
              <Input v-model="pagerequest.paperName" placeholder="问卷名称"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="题目生成方式:" prop="paperType" style="width:100%;">
              <Select v-model="pagerequest.paperType" clearable>
                <Option v-for="(item, i) in paperTypeOpts" :key="i" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <div style="text-align:right">
              <Button
                type="primary"
                size="large"
                class="toolbar-btn"
                @click="getpage1(true)"
              >查询</Button>
              <Button
                type="primary"
                size="large"
                class="toolbar-btn"
                @click="onCreate"
              >新建</Button>
            </div>
          </Col>
        </Row>
      </Form>

      <Table
        class="margin-top-10"
        :loading="pageLoading"
        :columns="columns"
        no-data-text="暂无数据"
        border
        :data="pageList"
      ></Table>
      <Page
        show-sizer
        show-total
        :total="totalCount1"
        class="margin-top-10"
        @on-change="pageChange1"
        @on-page-size-change="pagesizeChange1"
        :page-size="pageSize1"
        :current="currentPage1"
      ></Page>
    </Card>

    <create-comp :item-id="editItem.id" :preview="previewMode" @on-hide="onHide" v-model="createModalShow"  @save-success="getAll"></create-comp>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import GetAdminUserMixin from "@/mixins/GetAdminUserMixin";
import ListMixin from "@/mixins/ListMixin";
import ajax from "@/lib/ajax";
import PageRequest from "@/store/entities/page-request";
import CreateComp, { ClassItem } from './create.vue';

class PageListRequest extends PageRequest {
  paperName = '';
  paperType = '';
}

@Component({
  components:{
    CreateComp,
  }
})
export default class ListComp extends Mixins(GetAdminUserMixin, ListMixin) {
  pagerequest: PageListRequest = new PageListRequest();
  
  totalCount1 = 0
  pageSize1 = 10
  currentPage1 = 1
  pageChange1(page) {
    this.currentPage1 = page
    this.getpage1()
  }
  pagesizeChange1(pagesize) {
    this.pageSize1 = pagesize
    this.getpage1()
  }
  getpage1(flagResetPage ?: boolean) {
    if (flagResetPage) {
      this.currentPage1 = 1
    }
    this.pagerequest.maxResultCount = this.pageSize1;
    this.pagerequest.skipCount = (this.currentPage1 - 1) * this.pageSize1;
    this.getAll()
  }

  pageList: any[] = []
  editItem: ClassItem = new ClassItem();
  previewMode = false

  paperTypeOpts = [
  
  ]
  
  // DONE
  async getAll() {
    this.pageLoading = true
    const list = await ajax.get('/api/services/app/QuestionNaireLibrary/GetList', {
      params: {
        paperName: this.pagerequest.paperName,
        paperType: this.pagerequest.paperType,
        skipCount: this.pagerequest.skipCount,
        maxResultCount: this.pagerequest.maxResultCount,
      }
    })
      .then((resp) => {
       this.pageLoading = false
        this.totalCount1 = resp.data.result.totalCount1
          this.pageList = resp.data.result.items.map((item) => ({
          id: item.id,
          paperName: item.questionNaireName,
          paperType: item.questionGeneratType,
       
        }))
      })
      .catch(() => {})
      // .then(() => {
      //   this.pageLoading = false
      //   /**
      //    * TODO: 绑接口
      //    * J1.3问卷列表
      //    */

      

      //   this.pageList = Object.keys([...new Array(9)]).map((i) => ({
      //     id: i,
      //     paperName: `alskdfjalskdfj----${i}`,
      //     paperType: Math.ceil(Math.random() * 5),
      //   }))
      // })
  }

  initColumns() {
    this.columns = [
      {
        type: 'index',
        width: 70,
        align: 'center',
        title: '序号',
        indexMethod: (row) => {
          return row._index + 1 + this.pageSize1 * (this.currentPage1 - 1)
        },
      },
      {
        title: '问卷名称',
        key: 'paperName',
        width: 300,
        align: "center",
        render: (h:any, params: any) => {
          return h('span', params.row.paperName)
        }
      },
      {
        title: '题目生成方式',
        key: 'paperType',
        align: "center",
        render: (h:any, params: any) => {
          const paperType = this.paperTypeOpts.find(x => x.value == params.row.paperType) || { label: ''}
          return h('span', paperType.label)
        }
      },
      {
        title: "操作",
        key: "Actions",
        width: 300,
        align: "center",
        render: (h: any, params: any) => {
          return h("div", [
            h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.onEdit(params.row)
                  }
                }
              },
              "编辑"
            ),
            h(
              "Button",
              {
                props: {
                  type: "error",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.onDelete(params.row)
                  }
                }
              },
              "删除"
            ),
          ])
        },
      }
    ]
  }


  async createdInitAdmin() {
  }

  onCreate() {
    this.editItem = new ClassItem()
    this.createModalShow = true
  }

  onEdit(item) {
    console.log('---', item)
    this.editItem = item
    this.createModalShow = true
  }

  onDelete(item) {
    console.log('---', item)
    
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除该问卷？",
      okText: "确定",
      cancelText: "取消",
      onOk: async () => {
        ajax.delete('/api/services/app/QuestionNaireLibrary/Remove', {
          params: {input:item.id}
        })
          .then((resp) => {})
          .catch(() => {})
          .then(() => {
            /**
             * TODO: 绑接口
             * J1.5问卷删除
             * 
             */
            this.getAll()
          })
      }
    });
  }

  onHide() {
  }

}
</script>

<style>
</style>